<template>
    <div class="tabbar">
        <router-link  class="tabbar-item"  exact active-class="active" to="/index">
             <img src="../../assets/icon/tabbar/home1.svg" alt="" class="img1">
            <img src="../../assets/icon/tabbar/home2.svg" alt="" class="img2">
            <p>首页</p>
        </router-link>
        <router-link class="tabbar-item" exact active-class="active" to="/category">
            <img src="../../assets/icon/tabbar/classic1.svg" alt="" class="img1">
            <img src="../../assets/icon/tabbar/classic2.svg" alt="" class="img2">
           <!-- <img src="" alt=""> -->
            <p>分类</p>
        </router-link>
        <router-link class="tabbar-item" exact active-class="active" to="/cart">
           <img src="../../assets/icon/tabbar/cart1.svg" alt="" class="img1">
           <img src="../../assets/icon/tabbar/cart2.svg" alt="" class="img2">
           <!--  <img src="" alt=""> -->
            <p>购物车</p>
        </router-link>
        <router-link class="tabbar-item" exact active-class="active" to="/user">
            <img src="../../assets/icon/tabbar/user1.svg" alt="" class="img1">
            <img src="../../assets/icon/tabbar/user2.svg" alt="" class="img2">
           <!-- <img src="" alt=""> -->
            <p>我的</p>
        </router-link>
    </div>
</template>
<script>
export default {
   
    
}
</script>
<style lang="scss" scoped>
.tabbar{
    border-top: 1px solid #eee;
    background: #fff;
    height: 49px;
    display: flex;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 10000;
    .tabbar-item{
        padding-top: 3px;
      
        display: block;
        text-align: center;
        flex: 1;
        >img{
            display: block;
            width: 23px;
            height: 23px;
            margin: 0 auto;
        }
        >.img2{
            display: none;
        }
        p{
            margin-top: 2px;
            font-size: 14px;
            color: #333;
        }
    }

    .tabbar-item.active p{
        color:#fc4141;
    }
    .tabbar-item.active .img1{
        display: none;
    }
    .tabbar-item.active .img2{
        display:   block;
    }

}


</style>